<template>
  <div>
    <div class="top"><img src="../assets/app-home.png" alt="" />APP</div>
    <div class="banner">
      <!-- <div class="new-user banner-size">
      </div>
      <div class="active-user banner-size"></div>
      <div class="click-num banner-size"></div> -->
      <div class="banner-size" :class="item.bgColor" v-for="(item, index) in banners" :key="index">
        <div style="font-size: 24px;display: flex;align-items: center;"><img :src="item.typeSrc" alt="" style="width: 30px; margin-right: 24px;">{{item.type}}<img src="../assets/circle-i.png" alt="" style="width: 22px;margin-left: 13px"></div>
          <div class="date">今日 <span style="margin-left: 94px"> {{item.today}} </span> </div>
          <div class="date">昨日 <span style="margin-left: 94px"> {{item.yestoday}} </span></div>
          <div class="date">七日平均 <span style="margin: 0 50px 0 54px">{{item.average}}</span><span style="font-size: 16px; margin-right: 12px;font-weight: 400;">+{{item.percentage}}%</span><img src="../assets/up-arrow.png" alt="" style="margin: 0 0 5px 0"></div>
      </div>
    </div>
    <div class="form margin">
        <div style="font-size: 30px;margin:0 0 30px 0"><span style="display: inline-block; margin:0 16px -8px 0; width:7px;height:35px;background:#37c1c3;border-radius: 11px;"></span>城市数据</div>
        <div>
            <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="-"
                :clearable="false"
                start-placeholder="开始日期"
                unlink-panels
                size='medium'
                suffix-icon="el-icon-date"
                prefix-icon="none"
                style="width:240px; margin-bottom: 30px; background-color:transparent; border: 1 px solid #888888"
                end-placeholder="结束日期">
            </el-date-picker>
            <span class="el-icon-date" style="color: #37c1c3; font-size: 20px; position: relative; left: -32px; top: 2px; z-index: -1"></span>
        </div>
      <el-table
        class="customer-table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{background: '#f2f2f2'}">
    <el-table-column
      type="selection"
      width="55"
      style="background: #f2f2f2"
      align="center">
    </el-table-column>
    <el-table-column
      type="index"
      label="序号"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="city"
      label="城市"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="新增用户"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      label="活跃用户"
      align="center"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        >
      </el-pagination>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'appData',
  data () {
    return {
      banners: [
        {
          bgColor: 'new-user',
          typeSrc: require('../assets/user.png'),
          type: '新增用户',
          today: 500,
          yestoday: 4008,
          average: 2312,
          percentage: '4.93'
        },
        {
          bgColor: 'active-user',
          typeSrc: require('../assets/heart.png'),
          type: '活跃用户',
          today: 230,
          yestoday: 4128,
          average: 5000,
          percentage: '2.13'
        },
        {
          bgColor: 'click-num',
          typeSrc: require('../assets/click.png'),
          type: '启动次数',
          today: 544,
          yestoday: 1234,
          average: 5123,
          percentage: '4.21'
        }
      ],
      tableData: [
        {
          date: '武汉',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '武汉',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '武汉',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '武汉',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '武汉',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '武汉',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '武汉',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection: [],
      value1: ''
    }
  },
  methods: {
    cellStyle (row) {
      return 'background: #f2f2f2;'
    }
  },
  currentChange (currentPage) {
    this.currentPage = currentPage
  }

}
</script>

<style scoped>
.top {
  padding: 10px 0 10px 15px;
  font-size: 12px;
  background-color: rgb(245, 245, 245);
}
.top img {
  width: 20px;
  height: 20px;
  margin: 0 5px 3px 0;
  vertical-align: middle;
}
.banner {
  display: flex;
  justify-content: space-around;
  padding: 46px 100px 0 100px;
}
.new-user {
  background-image: url("../assets/purple.png");
}

.active-user {
  background-image: url("../assets/orange.png");
}
.click-num {
  background-image: url("../assets/blue.png");
}
.banner-size {
  width: 459px;
  height: 222px;
  padding: 27px 0 0 40px;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}
.date {
    margin: 10px 0;
    font-size: 20px;
}
.date span {
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
}
.data i {
    font-size: 16px;
}
.margin {
    margin: 66px 168px 20px 141px;
}
.customer-table{
    border: 1px solid #f2f2f2;
  }
</style>
